<template>
  <div class="container">
    <h1>动态组件的使用</h1>
    <div v-for="(item, index) in newsComType" :key="index">
      <component :is="item.type"></component>
    </div>
  </div>
</template>
<script>
import newsData from "./news";
import newsImage from "./components/newsImage.vue";
import newsText from "./components/newsText.vue";
import newsVideo from "./components/newsVideo.vue";

export default {
  components: { newsImage, newsText, newsVideo },
  data() {
    return {
      newsData,
      newsImage,
      newsText,
      newsVideo,
    };
  },
  computed: {
    newsComType() {
      return this.newsData.map((item) => {
        return {
          ...item,
          type: "news" + item.type,
        };
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
